<template>
  <div class="login">
    <div class="bg_img"></div>
    <div class="title_help_wrapper">
      <div class="title">欢迎来到团油！</div>
      <div class="help_wrapper">
        <Icon type="ios-help-circle-outline" />
        <span class="help">收不到短信验证码？</span>
      </div>
    </div>
    <Form ref="formInline" :model="formInline" :rules="ruleInline">
      <FormItem prop="user">
        <Input
          prefix="ios-call"
          type="text"
          v-model="formInline.user"
          placeholder="请输入手机号码"
          style="width:100%"
        />
        <Icon type="ios-person-outline" slot="prepend"></Icon>
      </FormItem>
      <FormItem prop="code" inline>
        <Input
          prefix="md-barcode"
          type="text"
          v-model="formInline.code"
          placeholder="请输入验证码"
          style="width:65%; margin-right:18px;"
        />
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
        <Button type="“default”">获取验证码</Button>
      </FormItem>
      <FormItem>
        <Button
          :loading="isLoading"
          long
          type="error"
          @click="handleSubmit('formInline')"
          class="btn"
        >登录</Button>
      </FormItem>
      <FormItem>
        <RadioGroup v-model="aggree">
          <Radio label="同意">
            登录或注册即表示同意
            <a href>《团油服务条款&隐私协议》</a>
          </Radio>
        </RadioGroup>
      </FormItem>
    </Form>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      aggree: "同意",
      isLoading: false,
      formInline: {
        user: "0123456789",
        code: "1234"
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 4,
            max: 4,
            message: "验证码应该为4位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit(name) {
      this.isLoading = true;
      this.$refs[name].validate(valid => {
        if (valid) {
          this.isLoading = true;
          this.$Message.success("登录成功!");
          this.$router.replace("/add_oil");
        } else {
          this.isLoading = false;
          this.$Message.error("登录失败!");
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.login {
  .bg_img {
    position: fixed;
    top: 0;
    background: url('../../assets/image/bg.jpeg');
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
  }

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;

  .title_help_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    font-size: 12px;
    margin: 6px 0px;

    .title {
      font-size: 26px;
      color: red;
    }

    .help {
      margin-left: 3px;
      color: #bbbbbb;
    }
  }

  .not_receive_message {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
